<template>
	<uv-navbar
	  :fixed="false"
	  @leftClick="$onClickLeft"
	  bgColor="#09b4f1"
	>
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container"  >
	    <view class="bg-white" v-if="types == ''">
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
		</view> 
		<view class="wrap">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" lower-threshold="20" @scroll="scroll" @scrolltolower="reachBottom">
				<view class="page-box" @touchmove="handletouchstart" @touchend="handletouchend">
					<block v-if="dataList.length > 0">
						<view class="client" v-for="(items, index) in dataList" :key="index">
							<view class="flex justify-between">
								<view class="flex">
									<view><uv-avatar :src="items.ownUserAvatar"></uv-avatar></view>
									<view class="flex flex-column ml-1">
										<text>{{items.ownUserName}}</text>
										<text class="text-color-assist font-size-sm">{{timeFormats(items.createTime)}}</text>
									</view>
								</view>
								<view><uv-tags :text="items.recordTypeName" size="mini"></uv-tags></view>
							</view>
							<view class="tap">
								{{items.content}}
							</view>
							<view class="bottom">
								<view class=" text-color-assist font-size-sm" >下次跟进时间：{{timeFormats(items.nextTime)}}</view>
							</view>
							<view class="top">
								<view class="left">
									<view class="text-color-base">
										<text v-if="items.types == 'customer'">关联客户：</text>
										<text v-else-if="items.types == 'clues'">关联线索：</text>
										<text v-else>关联商机：</text>
										<text style="color: #3c9cff;" @click="onItem(items.types,items.typesId)">{{items.typesName}}</text>
										<!-- <uv-text size="12" v-if="items.types == 'customer'" type="success" :text="'关联客户：'+items.typesName"></uv-text>
										 <uv-text size="13" v-else-if="items.types == 'clues'" type="warning" :text="'关联线索：'+items.typesName"></uv-text>
										 <uv-text v-else type="error" :text="'关联商机：'+items.typesName"></uv-text> -->
									</view>
								</view>
							</view>
							<view class="py-2" v-if="types != ''"><uv-gap height="1" bgColor="#bbb"></uv-gap></view>
							<view class="font-size-medium px-4 flex justify-center" v-if="types != ''">
								<view class="flex align-center " @click="follow(items.types,items.typesId,items.typesName)">
									<uv-icon size="25" name="plus-circle" color="#09b4f1"></uv-icon>
									<text class="ml-1">跟进</text>
								</view>
							</view>
						</view>
						 <uv-load-more  :status="listStatus" />
					</block>
					<uv-empty text="暂无数据" v-else  margin-top="100" mode="list"></uv-empty>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	computed
} from 'vue'
import { onLoad,onShow ,onReady} from '@dcloudio/uni-app'
import {
  getRecordPage
} from '@/api/customer'
import { formatDateTime } from '@/utils/util'
const title = ref('跟进记录')
const keyword = ref('')
const mobile = ref('')
const phone = ref('')
const dealStatus = ref(-1)
const dealStatusName = ref('')
const scrollHeight = ref(0)
const pH = ref(0)
const scrollTop = ref(-1)
const specClass = ref('hide')
const oldScrollTop = ref(0)
const dataList = ref([])
const dx = ref(0)
const page = ref(1)
const pageSize = ref(10)
const lastPage = ref(false)
const listStatus = ref('loadmore')
const isRefresh = ref(false)
const relation = ref('my')
const types = ref('')
const list = ref( 
	[{
		name: '我的记录',
		value: 'my'
	}, {
		name: '下属记录',
		value: 'sub'
	}]
)
const actions = ref(
	[{
		name: '未成交',
		value:0
	}, {
		name: '成交',
		value:1
	} ]
)

defineExpose({isRefresh})

const customStyle = computed(() =>{
	return {
		 paddingLeft:'10rpx',
		  paddingRight:'120rpx'
		}
})
const statusBarHeight = ref(0)
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
const customStyle2 = computed(() =>{
	return {
		 marginTop:(uni.getSystemInfoSync().statusBarHeight+40)+'px',
	     backgroundColor:'#ffffff'
		  //top:'100px'
		}
})
const popup = ref()

onReady(()=>{
	uni.getSystemInfo({ 
		success(res) {
			pH.value = res.windowHeight 
			let scrollH = uni.createSelectorQuery().select(".sv")
			scrollH.boundingClientRect(data=>{
				let pH0 = pH.value
				scrollHeight.value = pH0 - data.top - 5  
			}).exec()
		}
	})
})

onLoad((e) => {
	console.log('type:',e.types)
	if(e.types){
		types.value = e.types
		title.value = '今日待跟进记录'
	}
	getRecordList();
})

onShow(()=>{
	if (isRefresh.value) {
		isRefresh.value = false
		page.value = 1
		lastPage.value = false
		scrollTop.value = 0
		dataList.value = []
		getRecordList()
	}
})


const handletouchstart = () => {
	specClass.value = 'show'
}
const handletouchend = () => {
	specClass.value = 'hide'
}

// 格式化时间
const timeFormats = (val) => {
	if(val){
		return formatDateTime(val)
	} else {
		return '--'
	}
}
// 页面数据
const getRecordList = async(isNextPage,pages) => {
	await getRecordPage({
		pageNo: page.value,
		pageSize: pageSize.value,
		relation: relation.value,
		types:types.value,
		isNextTime : types.value != '' ? true : false
	}).then(res => {
		if(res) {
			// 不够一页
			if (res.list.length < 10) {
				listStatus.value = 'nomore'
			}
			// 最后一页
			if(res.list.length == 0) {
				lastPage.value = true
			} 
			// 第二页开始
			if(isNextPage) {
				dataList.value = dataList.value.concat(res.list)
				return 
			}
			dataList.value = res.list
		}
	})
}
// scroll 滚动记录
const scroll = (e) => {
	oldScrollTop.value = e.detail.scrollTop; // 必要
}
// 滚动到底部
const reachBottom = () => {
	if(lastPage.value || listStatus.value == 'loading') return ;
	if (!lastPage.value) {
		listStatus.value = 'loading';
		setTimeout(() => {
			listStatus.value = 'loadmore'
			getRecordList(true,++page.value)
		}, 500)	
	}
}

const onItem = (type,id) => {
	if(type == 'clues'){
		uni.navigateTo({
			url: '/pages/components/pages/clues/cluesDetails?id=' + id
		});
	}else if(type == 'customer'){
		uni.navigateTo({
			url: '/pages/components/pages/customer/customerDetails?id=' + id
		});
	}else {
		uni.navigateTo({
			url: '/pages/components/pages/business/businessDetails?id=' + id
		});
	}
	
}

const follow = (type,id,name) => {
	if(type == 'clues'){
		uni.navigateTo({
			url: '/pages/components/pages/clues/followUp?cluesId=' + id + '&cluesName=' + name
		})
	}else if(type == 'customer'){
		uni.navigateTo({
			url: '/pages/components/pages/customer/followUp?customerId=' + id + '&customerName=' + name
		})
	}else {
		uni.navigateTo({
			url: '/pages/components/pages/business/followUp?businessId=' + id + '&businessName=' + name
		})
	}
	
}




</script>

<style lang="scss">
.container {
	background-color: #F7F7F7;
}
.page-box {
	padding: 20rpx 20rpx 45rpx;
}
.client {
	width: 710rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		font-size: 24rpx;
		.left {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			// .store {
			// 	max-width: 400rpx;
			// 	font-size: 30rpx;
			// 	font-weight: bold;
			// }
		}
	}
	.tap {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 20rpx 0 0;
		font-size: 24rpx;
		.tap-item {
			background-color: #FF6146;
			color: #fff;
			font-size: 25rpx;
			padding: 10rpx 25rpx;
			border-radius: 8rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.content {
			flex: 1;
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $uv-tips-color;
			}
		}
		.right {
			margin-left: 10rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $uv-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
		align-items: center;
		.client_time {
			color: #777;
  		    font-size: 26rpx;
		}
		.btn {
			line-height: 60rpx;
			width: 160rpx;
			border-radius: 5px;
			font-size: 26rpx;
			text-align: center;
			color: $uv-primary-dark;
		}
		.entity {
			color: #fff;
			background-color: #09b4f1; 
		}
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}


</style>
